<template>
  <div>
    <nav-header></nav-header>
    <!--start:评价  -->
    <div style="margin-top: 20px" v-if="oOrderGood.length">
      <div class="mian-eval" v-for="(orderInfo, index) in oOrderGood" :key="index">
        <!-- 隐藏倒计时，确认收货起30日内未评价，则自动好评  -->
        <div style="display: none" v-if="isCountDown">
          <w-count-down-time 
            :start="new Date()" 
            :target="new Date(new Date(orderFormList.confirmTime).getTime() + 1000 * 60 * 60 * 24 * 30)"
            @on-timer="onTimer(orderFormList.id, orderInfo.goods_id)">
          </w-count-down-time>
        </div>
        <span class="title">订单评价</span>
        <div class="eval-detail">
          <div class="shop">{{orderFormList.storeName}}</div>
          <div class="goods">
            <div class="goods-info">
              <div class="shopImg">
                <img class="minimg" v-lazy="orderInfo.goods_mainphoto_path" /> 
              </div> 
              <div class="shop-r">
                <div class="shop-r-t text-c">{{orderInfo.goods_name}}</div>
                <div class="shop-r-b">
                  <span class="shop-r-b-l text-c">共计：{{orderData.totalAllCount}}件</span>
                </div>
              </div>
            </div>
            <div class="eval">
              <span class="eval-title">商品评价</span>
              <!-- 评星  -->
              <div class="eval-start">
                <w-rate v-model="orderInfo.descriptionEvaluate"></w-rate>
              </div>
            </div>
            <div class="content">
              <textarea class="eval-content" placeholder="宝贝能满足您的期待吗？请详细说明一下他的优缺点吧！" v-model="orderInfo.evaluateInfo"></textarea>
              <div class="upload">
                <w-upload :formid="`evaluatePhotos${index}`" v-model="orderInfo.evaluatePhotos" :width="40" :height="40" type="evaluate"></w-upload>
              </div>
            </div>
          </div>
          <div class="fright-eval">
            <div class="seller">供应商评价</div>
            <div class="eval eval-f">
              <span class="eval-title">物流服务</span>
              <!-- 评星  -->
              <div class="eval-start">
                <w-rate v-model="orderInfo.shipEvaluate"></w-rate>
              </div>
            </div>
            <div class="eval eval-f">
              <span class="eval-title">服务态度</span>
              <!-- 评星  -->
              <div class="eval-start">
                <w-rate v-model="orderInfo.serviceEvaluate"></w-rate>
              </div>
            </div>
          </div>
        </div>
        <div class="btnC" v-if="index == (oOrderGood.length - 1)">
          <w-button type="main" class="btnM" @on-click="releaseEval(orderFormList.id, orderInfo.goods_id)">发布评价</w-button>
        </div>
      </div>
    </div>
    <!--评价:end  -->
  </div>
</template>

<script>
import header from './components/header'
import { apiOrderByIds, apiAddEvaluate, apiEditOrderStatus } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isCountDown: false,
      orderData: {}, // 整个订单详情，包含商品详情
      orderFormList: {}, // 订单详情
      oOrderGood: {}, // 订单商品详情
      confirmTime: '', // 确认收货时间
      orderID: '',
      orderStatus: '', // 订单状态
      evaluGoodsInfo: []
    }
  },
  components: {
    'nav-header': header
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    if (!this.$route.query.id) return
    this.fetchOrderByIds(this.$route.query.id)
  },
  methods: {
    // 根据ID获取订单信息
    fetchOrderByIds(ids) {
      apiOrderByIds(this.token, ids).then(data => {
        this.orderData = data
        this.orderFormList = this.orderData.orderFormList[0]
        if (data.orderFormList.length > 0) {
          this.oOrderGood = JSON.parse(this.orderFormList.goodsInfo || '[]')
          this.orderID = this.orderFormList.id
          this.orderStatus = this.orderFormList.orderStatus
          // 添加评价属性
          this.oOrderGood.forEach(v => {
            this.$set(v, 'descriptionEvaluate', 5)
            this.$set(v, 'serviceEvaluate', 5)
            this.$set(v, 'shipEvaluate', 5)
            this.$set(v, 'evaluateInfo', '')
            this.$set(v, 'evaluatePhotos', [])
          })
        }
      })
    },
    // 确认收货超出30日，自动默认好评
    onTimer(orderID, goodsId) {
      this.evaluGoodsInfo.forEach((v) => {
        v.evaluateInfo = '买家未评价，系统自动默认好评'
        v.descriptionEvaluate = '5'
        v.serviceEvaluate = '5'
        v.shipEvaluate = '5'
        v.evaluateGoodsId = goodsId
        v.evaluatePhotos = [] // 图片
      })
      this.fetchAddEvaluate(this.token, orderID, this.evaluGoodsInfo)
    },
    // 点击“发布评价”按钮
    releaseEval(orderId, goodsId) {
      let flag = true
      this.oOrderGood.forEach(v => {
        this.evaluGoodsInfo.push({
          descriptionEvaluate: v.descriptionEvaluate,
          serviceEvaluate: v.serviceEvaluate,
          shipEvaluate: v.shipEvaluate,
          evaluateInfo: v.evaluateInfo,
          evaluatePhotos: v.evaluatePhotos,
          evaluateGoodsId: goodsId,
          addevaInfo: v.addevaInfo,
          addevaPhotos: v.addevaPhotos})
      })
      this.evaluGoodsInfo.forEach(item => {
        if (item.evaluateInfo.length > 200) {
          this.$toast('评价内容200字以内')
          flag = false
          return
        }
      })
      if (this.orderStatus != '50' && flag) {
        this.fetchAddEvaluate(this.token, orderId, this.evaluGoodsInfo)
        this.$toast('发布成功', () => {
          this.$router.replace('../my/order')
        })
      }
    },
    fetchAddEvaluate(token, orderId, evaluGoodsInfo) {
      apiAddEvaluate(token, orderId + '', evaluGoodsInfo).then(data => { // 提交评价
        this.fetchEditOrderStatus(token, orderId)
      })
    },
    fetchEditOrderStatus(token, orderId) {
      apiEditOrderStatus(token, orderId + '', '50').then(data => { // 修改订单状态
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  $fontSize: 12px;
  .mian-eval {
    width: 1230px;
    height: auto;
    margin: 0 auto;
    background-color: $color-white;
    padding: 0 30px;
    .title {
      font-size: 16px;
      display: block;
      padding: 20px 0;
      color: $color-dark;
    }
    .eval-detail {
      border: 1px solid #ddd;
      .eval {
        margin: 20px 0;
        // padding: 20px 0 0;
        .eval-title {
          color: $color-disabled;
          vertical-align: middle;
          font-size: $fontSize;
        }
        .eval-start {
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        }
      }
      .shop {
        padding: 8px 20px;
        color: $color-dark;
      }
      .goods {
        padding: 20px;
        border: 1px solid #ddd;
        border-right: none;
        border-left: none;
        .goods-info {
          .shopImg {
            width: 125px;
            height: 125px;
            border: 1px solid #ddd;
            float: left;
            margin-right: 10px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
          }
          .shop-r {
            display: table-cell;
            height: 125px;
            width: 180px;
            padding: 0;
            font-size: $fontSize;
            .text-c {
              color: $color-dark;
            }
            &-t {
              height: 40px;
              margin-bottom: 26px;
            }
            &-b {
              &-l {
                float: left;
              }
              &-r {
                float: right;
              }
            }
          }
        }
        .content {
          width: 470px;
          border: 1px solid #ddd;
          .eval-content {
            padding: 12px 12px 0 12px;
            border: none;
            outline: none;
            cursor: default;
            height: 60px;
            font-size: $fontSize;
            &::-moz-placeholder {
              color: $color-gray;
            }
          }
          .upload {
            padding: 0 12px 0;
          }
        }
      }
      .fright-eval {
        padding: 20px;
        .eval-f {
          padding-top: 18px;
          margin: 0;
        }
        .seller {
          color: $color-dark;
        }
      }
    }
    .btnC {
      text-align: center;
      padding: 30px 360px 40px;
      .btnM {
        width: 280px;
        height: 40px;
        font-size: 16px;
      }
    }
  }
</style>
